<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="/css/mycss.css"/>
</head>
<body>
<!--Vue.js-->
<script src="/js/vue.js"></script>
<!--Element-ui-->
<script src="/js/index.js"></script>
<!--axios-->
<script src="/js/axios.min.js"></script>
<!--cookie工具类-->
<script src="/js/cookie_utils.js"></script>

<div id="container">
    <el-container>

        <!--网站图片 + 用户信息-->
        <el-header height="100%">
            <el-col :span="6">
                <img class="logo" src="/img/server_html/sportLogo.jpg" style="width: 100px;height: 100px"/>
            </el-col>
            <el-col :span="9">
                <span class="campus-sports" style="margin-left: 150px;font-size: 36px;padding-top: 50px">重庆工程学院校园运动会</span>
            </el-col>
            <el-col :span="6" :offset="12" style="display: flex; align-items: center; justify-content: flex-end;">
                <br>
                <!--个人用户信息-->
                <el-dropdown >
                    <span class="no-attention move-bottom-mini-mini" style="font-size: 20px">
                                用户:&nbsp;
                        <el-button type="text"  icon="el-icon-arrow-down" style="font-size: 20px;margin-right: 20px">{{user.username}}</el-button>
                    </span>

                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item >
                            <el-button @click="myPage" style="width: 100px;text-align: center;border: none;font-size: 15px">个人信息</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-button @click="logout" style="width: 100px;text-align: center;border: none;font-size: 15px">注销</el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!--头像-->
                <el-col :span="6" :offset="0">
                    <el-avatar :src="user.userHeadUrl"></el-avatar>
                </el-col>
            </el-col>
        </el-header>

        <el-main>
            <!--导航栏-->
            <el-col :span="17" :offset="3">
                <el-menu id="nav" :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                         @select="handleSelect">
                    <el-menu-item index="1" @click="sportsIPage">赛事公布</el-menu-item>
                    <el-menu-item index="2" style="margin-left: 85px" @click="signupPage">申请报名</el-menu-item>
                    <el-submenu index="3" style="margin-left: 85px">
                        <template slot="title">成绩查询</template>
                        <el-menu-item index="3-1" @click="queryIPage('searchsign')">报名查询</el-menu-item>
<!--                        <el-submenu index="3-2">-->
<!--                            <template slot="title">成绩查询</template>-->
<!--                            <el-menu-item index="3-2-1" @click="queryIPage('searchscore')">单项成绩查询</el-menu-item>-->
<!--                            <el-menu-item index="3-2-2" @click="queryIPage('searchteam')">团体成绩查询</el-menu-item>-->
<!--                        </el-submenu>-->
                        <el-menu-item index="3-2" @click="queryIPage('searchscore')">比赛成绩查询</el-menu-item>
                        <el-menu-item index="3-3">班级总分查询</el-menu-item>
                        <el-menu-item index="3-4" @click="calssIPage">班级总分查询</el-menu-item>
                        <el-menu-item index="3-5" @click="collegeIPage">学院总分查询</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="4" style="margin-left: 85px" @click="scorePage">成绩公布</el-menu-item>
                    <el-menu-item index="5" style="margin-left: 85px">投诉与检举</el-menu-item>
                    <el-menu-item index="5" style="margin-left: 85px"> <a href=" " v-if="user.type === '2'">成绩录入</a ></el-menu-item>
                </el-menu>
            </el-col>

            <!--轮播图-->
            <el-col :span="10">
                <el-carousel indicator-position="outside" height="300px"
                             style="width:680px; position: relative; top: 20px; left: 50px">
                    <el-carousel-item v-for="imgUrl in circleImgUrl" :key="imgUrl">
                        <img :src="imgUrl" width="100%" height="100%" style="border-radius: 5px"/>
                    </el-carousel-item>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row no-padding" id="widget_ext_weather"
                                            style="z-index: 999; margin: 0 auto 0;float: none;position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);">
                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" align="left"></div>
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" align="left" style="padding: 0 0 0 30px">
                        <iframe style="background-color: rgba(0,0,0,0.5);border-radius: 5px;"
                                allowtransparency="true" frameborder="0" width="290" height="96" scrolling="no"
                                src="//tianqi.2345.com/plugin/widget/index.htm?s=2&amp;z=1&amp;t=0&amp;v=0&amp;d=2&amp;bd=0&amp;k=&amp;f=ffffff&amp;ltf=009944&amp;htf=cc0000&amp;q=1&amp;e=1&amp;a=1&amp;c=57516&amp;w=290&amp;h=96&amp;align=centor">

                        </iframe>
                    </div>
                    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1" align="left"></div>
                </div>
                </el-carousel>
            </el-col>

            <!--文字资讯-->
                <el-col :span="10" :offset="3">
                    <template>
                        <el-tabs  type="border-card" v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="失物招领" name="second">
                                <template>
                                    <el-table
                                        :data="tableData"
                                        style="width: 100%">
                                        <el-table-column
                                            type="index"
                                            :index="indexMethod">
                                        </el-table-column>
                                        <el-table-column
                                        prop="lostName"
                                        label="物品名">
                                    </el-table-column>
                                        <el-table-column
                                            prop="lostPlace"
                                            label="拾取地点">
                                        </el-table-column>
                                        <el-table-column
                                            prop="lostTime"
                                            label="拾取时间"
                                            width="180">
                                        </el-table-column>
                                        <el-table-column
                                            prop="pickUpName"
                                            label="拾取人姓名">
                                        </el-table-column>
                                    </el-table>
                                    <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="pageNum"
                                        :page-sizes="[5, 8]"
                                        :page-size="pageSize"
                                        layout="total,sizes,prev, pager, next, jumper"
                                        :total="total">
                                    </el-pagination>
                                </template>
                            </el-tab-pane>
                            <el-tab-pane label="预报名项目" name="third">
                                <template>
                                    <el-table
                                        :data="thirdData"
                                        style="width: 100%">
                                        <el-table-column
                                            type="index"
                                            :index="indexMethodThird">
                                        </el-table-column>
                                        <el-table-column
                                            prop="name"
                                            label="比赛名"
                                            width="110">
                                        </el-table-column>
                                        <el-table-column
                                            prop="type"
                                            label="比赛类型"
                                            width="50">
                                            <template slot-scope="scope">
                                                {{ scope.row.type === '1' ? '团队' : '个人' }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="gtype"
                                            label="性别"
                                            width="50">
                                            <template slot-scope="scope">
                                                {{ scope.row.type === '1' ? '男子' : '女子' }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="upnum"
                                            label="运动员/团队剩余名额"
                                            width="80">
                                        </el-table-column>
                                        <el-table-column
                                        prop="renum"
                                        label="裁判员剩余名额"
                                        width="80">
                                        </el-table-column>
                                        <el-table-column
                                            prop="time"
                                            label="报名结束时间"
                                            width="180">
                                        </el-table-column>
                                    </el-table>
                                    <el-pagination
                                        @size-change="handleSizeChangeThird"
                                        @current-change="handleCurrentChangeThird"
                                        :current-page="pageNumThird"
                                        :page-sizes="[5, 8]"
                                        :page-size="pageSizeThird"
                                        layout="total,sizes,prev, pager, next, jumper"
                                        :total="total">
                                    </el-pagination>
                                </template>
                            </el-tab-pane>
                            <el-tab-pane label="正进行项目" name="fourth">正进行项目</el-tab-pane>
                        </el-tabs>
                    </template>
                </el-col>



        </el-main>

        <el-footer class="foot">
            <br>
            <br>
            &copy;2023 by 第三组
        </el-footer>
    </el-container>
</div>


<script>
    var baseUrl = "http://localhost:8080/client/";

    //登录验证
    if (getCookieValue("token") == null || getCookieValue("token") === '') {
        window.location.href = baseUrl + 'system/toLogin?reason=nologin';
    }


    var vm = new Vue({
        el: '#container',
        data: {
            user: {
                userId: '',
                username: '',
                userHeadUrl: '',
                token: '',
                type:'',
            },
            circleImgUrl: ['http://i.cqie.edu.cn/resources/style/pc/images/newicon/bg_1.jpg',
                'http://i.cqie.edu.cn/resources/style/pc/images/newicon/bg_2.jpg',
                'http://i.cqie.edu.cn/resources/style/pc/images/newicon/bg_3.jpg'],

            img:'',
            index : 1,
            activeIndex: '0',
            activeName: 'second',
            pageNum:1,
            total:0,
            pageSize:5,
            pageNumThird:1,
            pageSizeThird:5,
            tableData:[],
            thirdData:[],
        },
        created: function () {
            this.user.token = getCookieValue("token");
            var param = window.location.href.split("?");
            if (param[1] === 'reason=successlogin') {
                this.$notify({
                    title: '登录成功',
                    message: '欢迎您',
                    type: 'success'
                });
            }
            axios({
                method: 'get',
                url: baseUrl + 'user/getLoginUserInfo' + '/' + this.user.token,
                header: {
                    token : this.user.token
                }
            }).then((res)=>{
                this.user.userId = res.data.data.userId;
                this.user.username = res.data.data.username;
                this.user.gender = res.data.data.gender;
                this.user.userHeadUrl = '/img/user_upload/' + res.data.data.img;
                this.user.type = res.data.data.type;
            });
            this.getPageInfo();
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            signupPage() {
                window.location.href = baseUrl+"system/toSignUp";
            },
            sportsIPage() {
                window.location.href = baseUrl + "system/toSportsList";
            },
            queryIPage(byType) {
                window.location.href =baseUrl + "system/toMatchRanking";
            },
            calssIPage() {
                window.location.href = baseUrl + "system/toClassScores";
            },
            collegeIPage() {
                window.location.href = baseUrl + "system/toCollegeScores";
            },
            myPage() {
                window.location.href = baseUrl + "system/toMyInfo";
            },
            scorePage() {
                window.location.href = "score.html";
            },
            logout() {
                axios({
                    method: 'post',
                    url: baseUrl + 'user/logout',
                    data: {
                        token: this.user.token,
                    },
                }).then((res)=>{
                    setCookieValue("token", "");
                    window.location.href = baseUrl + 'system/toLogin'
                });
            },
            //首页资讯
            handleClick(tab, event) {
                if (tab.name === "second"){
                    this.getPageInfo();
                }
                if (tab.name === "third"){
                    this.getPageInfoThird();
                }
            },
            // 获取当前页的数据信息
            getPageInfo(){
                //清空pageTicket中的数据
                this.tableData=[];
                axios({
                    method: 'get',
                    url: baseUrl + 'lostProperty/get',
                    params: {
                        pageNum: this.pageNum,
                        pageSize : this.pageSize
                    },
                }).then((res)=>{
                    this.tableData = res.data.data.rows;
                    this.total = res.data.data.total;
                });
            },
            getPageInfoThird(){
                //清空pageTicket中的数据
                this.thirdData=[];
                axios({
                    method: 'get',
                    url: baseUrl + 'project/get',
                    params: {
                        pageNum: this.pageNumThird,
                        pageSize : this.pageSizeThird
                    },
                }).then((res)=>{
                    this.thirdData = res.data.data.rows;
                    this.total = res.data.data.total;
                });
            },
            handleSizeChange(size) {
                //修改当前每页的数据行数
                this.pageSize = size;
                //数据重新分页
                this.getPageInfo();
            },
            handleCurrentChange(pageNum) {
                //修改当前的页码
                this.pageNum=pageNum;
                //数据重新分页
                this.getPageInfo();
            },
            indexMethod(index) {
                return index + 1;
            },
            indexMethodThird(index) {
                return index + 1;
            },
            handleSizeChangeThird(size) {
                //修改当前每页的数据行数
                this.pageSizeThird = size;
                //数据重新分页
                this.getPageInfoThird();
            },

            handleCurrentChangeThird(pageNum) {
                //修改当前的页码
                this.pageNumThird= pageNum;
                //数据重新分页
                this.getPageInfoThird();
            },
        }
    });
</script>

</body>
</html>
